<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H+ 后台主题UI框架 - 数据大屏</title>
  <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

  <link rel="shortcut icon" href="favicon.ico"> <link th:href="@{/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">
  <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">

  <!-- Morris -->
  <link th:href="@{/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">

  <!-- Gritter -->
  <link th:href="@{/js/plugins/gritter/jquery.gritter.css}" rel="stylesheet">

  <link th:href="@{/css/animate.css}" rel="stylesheet">
  <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

</head>

<body class="gray-bg">
<body class="gray-bg">
<div class="wrapper wrapper-content">
  <div class="row">
    <div class="col-sm-3">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-success pull-right">月</span>
          <h5>收入</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins">40 886,200</h1>
          <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
          <small>总收入</small>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-info pull-right">全年</span>
          <h5>订单</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins">275,800</h1>
          <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
          <small>新订单</small>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-primary pull-right">今天</span>
          <h5>访客</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins">106,120</h1>
          <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>
          <small>新访客</small>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <span class="label label-danger pull-right">最近一个月</span>
          <h5>活跃用户</h5>
        </div>
        <div class="ibox-content">
          <h1 class="no-margins">80,600</h1>
          <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div>
          <small>12月</small>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增六张图表 -->
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>在校生性别比例(男：0 女：1)</h5>
        </div>
        <div class="ibox-content">
          <div id="gender-pie-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>各专业学生人数排名</h5>
        </div>
        <div class="ibox-content">
          <div id="major-bar-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>各年级学生人数统计</h5>
        </div>
        <div class="ibox-content">
          <div id="grade-line-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>各班级学生人数统计前6位</h5>
        </div>
        <div class="ibox-content">
          <div id="class-bar-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>各专业学生性别统计</h5>
        </div>
        <div class="ibox-content">
          <div id="major-gender-pie-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>统计各宿舍的人数</h5>
        </div>
        <div class="ibox-content">
          <div id="dorm-line-chart" style="height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>消息</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content ibox-heading">
          <h3><i class="fa fa-envelope-o"></i> 新消息</h3>
          <small><i class="fa fa-tim"></i> 您有22条未读消息</small>
        </div>
        <div class="ibox-content">
          <div class="feed-activity-list">
            <!-- 消息内容 -->
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>用户项目列表</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <table class="table table-hover no-margins">
                <!-- 用户项目列表内容 -->
              </table>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>任务列表</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <ul class="todo-list m-t small-list ui-sortable">
                <!-- 任务列表内容 -->
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>交易地区</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <div class="row">
                <div class="col-sm-6">
                  <table class="table table-hover margin bottom">
                    <!-- 交易地区表格内容 -->
                  </table>
                </div>
                <div class="col-sm-6">
                  <div id="world-map" style="height: 300px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.7}"></script>

<!-- Flot -->
<script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.spline.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.symbol.js}"></script>

<!-- Peity -->
<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/js/demo/peity-demo.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery UI -->
<script th:src="@{/js/plugins/jquery-ui/jquery-ui.min.js}"></script>

<!-- Jvectormap -->
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>

<!-- EayPIE -->
<script th:src="@{/js/plugins/easypiechart/jquery.easypiechart.js}"></script>

<!-- Sparkline -->
<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>

<!-- Sparkline demo data  -->
<script th:src="@{/js/demo/sparkline-demo.js}"></script>

<script th:src="@{/js/echarts.min.js}"></script>

<script>  $(document).ready(function () {
  // 获取数据并初始化图表
  function initializeChart(chartId, url, chartType) {
    $.ajax({
      url: url,
      type: "get",
      dataType: "json",
      success: function (data) {
        var chartDom = document.getElementById(chartId);
        var myChart = echarts.init(chartDom);
        var option;

        if (chartType === 'pie') {
          option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: 'top'
            },
            series: [
              {
                name: '性别比例',
                type: 'pie',
                radius: '50%',
                data:  data.name.map((name, index) => ({ name: name, value: data.value[index] })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
        } else if (chartType === 'bar') {
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: data.name
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: data.value,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              }
            ]
          };
        } else if (chartType === 'line') {
          option = {
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: data.name
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: data.value,
                type: 'line',
                smooth: true,
                showSymbol: true
              }
            ]
          };
        }

        option && myChart.setOption(option);
      }
    });
  }

  // 初始化所有图表
  initializeChart('gender-pie-chart', '/getGenderData', 'pie');
  initializeChart('major-bar-chart', '/getMajorData', 'bar');
  initializeChart('grade-line-chart', '/getGradeData', 'line');
  initializeChart('class-bar-chart', '/getClassDataTop6', 'bar');
  initializeChart('major-gender-pie-chart', '/getMajorGenderData', 'pie');
  initializeChart('dorm-line-chart', '/getDormData', 'line'); // 假设有一个获取其他数据的接口

  // 初始化世界地图
  var mapData = {
    "US": 298,
    "SA": 200,
    "DE": 220,
    "FR": 540,
    "CN": 120,
    "AU": 760,
    "BR": 550,
    "IN": 200,
    "GB": 120,
  };

  $('#world-map').vectorMap({
    map: 'world_mill_en',
    backgroundColor: "transparent",
    regionStyle: {
      initial: {
        fill: '#e4e4e4',
        "fill-opacity": 0.9,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 0
      }
    },

    series: {
      regions: [{
        values: mapData,
        scale: ["#1ab394", "#22d6b1"],
        normalizeFunction: 'polynomial'
      }]
    },
  });
});
</script>
</body>
</html>